<!-- 化妆品数据 -->
<template>
  <div class="app-container">
    <div id="echarts" style="width: 1300px;height:550px;" />
  </div>
</template>

<script>
export default {
  name: 'LikeAnalysis',
  data() {
    return {
      loading: false,
      data: []
    }
  },
  mounted() {
    this.getHotClassify()
    this.myEcharts()
  },
  methods: {
    myEcharts() {
      var myChart = this.$ec.init(document.getElementById('echarts'))
      const option = {
        color: ['#409eff', '#304156'],
        title: { text: '用户偏好排行' },
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: ['product', 'count'],
          source: this.data.source
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0,
            rotate: 60
          }
        },
        grid: {
          bottom: '30%'
        },
        yAxis: {},
        series: [
          { type: 'bar' }
        ]
      }
      myChart.setOption(option)
    },
    getHotClassify() {
      this.loading = true
      this.request({
        url: '/analysis/like',
        method: 'GET'
      }).then(res => {
        if (res.code === 200) {
          console.log(res.data)
          this.data.source = res.data.list.map(item => {
            return {
              product: item.label,
              'count': item.count
            }
          })
        }
      }).finally(() => {
        this.loading = false
        this.$nextTick(() => {
          this.myEcharts()
        })
      })
    }
  }
}
</script>
<style lang='scss' scoped>

</style>
